// 加载层
let index = layer.load(0, { shade: [0.3, '#ccc'] });

  //ajax请求
pAjax({
  url:'../server/list.php',
  dataType:'json',
  success:function (res) {
//解构
let {meta,data}=res
// console.log(data)
//判断是否请求成功
if(meta.status==0){ 
  // layer.msg(meta.msg)
// 导入laypage
layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  //调用分页
  laypage.render({
    elem: 'controlBox', // 在页面中渲染分页组件的标签id
    count: data.length, // 总数据的条数
    // count:数据总条数显示 prev:上一页  next:下一页
    layout: ['count', 'prev', 'page', 'next',  'limit', 'refresh', 'skip'],
    limits:[2,4,6,8,10],
    limit:8,
    next:'下一页',
    first:'首页',
    last:'尾页',
    groups:4,
    jump: function(obj){ // 页码跳转函数
      // jump函数的形参obj是这个分页插件的所有配置对象
      // obj.curr属性 当前的页码数  第几页
      // obj.limit属性 每页显示数据的条数

       // 渲染函数
      let str = function(){ // 自调用函数执行,返回一个拼接好的html字符串
        var arr;
        // 当前页显示的要显示的数据
        // data.concat() 每次得到一个和data一样的新数组
        // splice(起始索引,条数)
        var thisData = data.concat().splice((obj.curr -1)*obj.limit, obj.limit);  
       //
        arr = thisData.map(v=>`
        <li class='dataList'>
        <img src="${v.imgpath.split('==========')[0]}" >
        <div>
            <h3>${v.name}</h3>
            <p  class="dataInfo">${v.introduce}</p>
            <p>
                <a href="./detail.html" index="${v.id}">查看详情</a>
            </p>
        </div></li>`);
        return arr.join('');
      }();
      //渲染
      document.getElementById('dataBox').innerHTML = str;
    }
  }); 
  
});
}
layer.close(index);
/* let detailBtns = document.querySelectorAll('.data ul li a')
// console.log(detailBtns)
for (let i=0; i < detailBtns.length; i++) {
    detailBtns[i].onclick = function(e){
      e=e||window.event
    //  e.preventDefault()
        lt ID=this.getAttribute('index')
      sessionStorage.setItem('proId',ID)
    }
} */
$('.data ul').on('click','a',function(){
 let id= $(this).attr('index')
 sessionStorage.setItem("proId",id)

})
  }
})
  //获取所有景点详情跳转按钮

  
